<template >
<div class="">
  <div class="page-wrap">
      <div class="page-title">Tabbar</div>
      <div>
        <mt-cell class="page-part" title="当前选中" :value="selected" />
      </div>
      <mt-tab-container class="page-tabbar-container" v-model="selected">
        <mt-tab-container-item id="订单">
          <mt-cell v-for="n in 5" :title="'订单 ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="发现">
          <mt-cell v-for="n in 7" :title="'发现 ' + n" />
        </mt-tab-container-item>
        <mt-tab-container-item id="我的">
          <div class="page-part">
            <mt-cell v-for="n in 12" :title="'我的 ' + n" />
          </div>
          <router-link to="/">
            <mt-button type="danger" size="large">退出</mt-button>
          </router-link>
        </mt-tab-container-item>
      </mt-tab-container>
    </div>
  <div class="bottom-nav">
    <mt-tabbar v-model="selected" fixed>
  
  <mt-tab-item id="订单">
  <i slot="icon"  class="fa fa-fire fa-2x"></i>
    热门
  </mt-tab-item>
  <mt-tab-item id="发现">
   <i slot="icon"  class="fa fa-leaf fa-2x"></i>
    活动
  </mt-tab-item>
  <mt-tab-item id="我的">
   <!-- <img slot="icon" src="../assets/user.png"> -->
    <i slot="icon"  class="fa fa-heart-o fa-2x"></i>
    我的
  </mt-tab-item>
</mt-tabbar>
  </div>
  
</div>
</template>

<script>

export default {
  data () {
    return {
       selected: '订单',
    }
  }
}
</script>

<style lang="css">
.page-tabbar {
    overflow: hidden;
    height: 100vh;
  }
  .page-wrap {
    overflow: auto;
    height: 100%;
    padding-bottom: 100px;
  }
  .fa-2x {
    font-size: 1.7em;
}
.bottom-nav{
  color:#5B5757;
}

</style>
